<template>
  <div>
    <div class="public-common" v-if="isEdit">
        <div class="public-title" style="text-indent: 20px;;">员工列表</div>
        <div class="inline-btn">
          <label>员工姓名：</label>
          <el-input v-model="searchdata.txtUserName"></el-input>
          <label>所属部门：</label>
          <el-input v-model="searchdata.txtOrgName"></el-input>
          <label>员工工号：</label>
          <el-input v-model="searchdata.txtUserNo"></el-input>
        </div>
        <div class="inline-btn">
          <label>身份证号：</label>
          <el-input v-model="searchdata.txtIDCard"></el-input>
          <label>职务：</label>
          <el-input v-model="searchdata.txtOfficeDuty"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
          <el-button >打印</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="UserName"  label="员工姓名" ></el-table-column>
            <el-table-column prop="OrgName"  label="所属部门" ></el-table-column>
            <el-table-column prop="LoginName"  label="登录帐号" ></el-table-column>
            <el-table-column prop="UserNo"  label="员工工号" ></el-table-column>
            <el-table-column prop="EntryTime"  label="入职时间" ></el-table-column>
            <el-table-column prop="Status"  label="用户状态" ></el-table-column>
            <el-table-column prop="IsOnline"  label="是否在线" ></el-table-column>
            <el-table-column prop="IDCard"  label="身份证号" ></el-table-column>
            <el-table-column prop="Sex"  label="性别" ></el-table-column>
            <el-table-column prop="Nationality"  label="民族"></el-table-column>
            <el-table-column prop="Education"  label="文化程度" ></el-table-column>
            <el-table-column prop="Polity"  label="政治面貌" ></el-table-column>
            <el-table-column prop="OfficeDuty"  label="职务" ></el-table-column>
            <el-table-column prop="ProfessionalPost"  label="职称" ></el-table-column>
            <el-table-column prop="HomeAddress"  label="现住址" ></el-table-column>
            <el-table-column prop="Tel"  label="联系电话" ></el-table-column>
            <el-table-column prop="Email"  label="Email" ></el-table-column>
            <el-table-column prop="Question"  label="问题" ></el-table-column>
            <el-table-column prop="Answer"  label="答案" ></el-table-column>
            <el-table-column prop="Memo"  label="备注" ></el-table-column>
            <el-table-column prop="CreatorText"  label="创建人" ></el-table-column>
            <el-table-column prop="CreateDate"  label="创建时间" ></el-table-column>
            <el-table-column prop="LastInTime"  label="最后登录时间" ></el-table-column>
            <el-table-column prop="LastOutTime"  label="最后退出时间" fixed="right"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--员工添加-->
    <div class="public-common" v-if="!isEdit">
        <div class="public-title" style="text-indent: 20px;;">员工详细信息</div>
        <div style="margin-top: 10px;">
          <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
            <!--第一个tab页-->
            <el-tab-pane label="员工详细信息" name="first">
              <el-form ref="formData1" :model="formData1" style="" :rules="formRule1" label-width="100px">
              <div>
                <div class="left">
                  <div class="inline-btn">
                      <el-form-item label="用户名称：" prop="txtUserName" style="width:295px;">
                        <el-input v-model="formData1.txtUserName"></el-input>
                      </el-form-item>
                      <el-form-item label="登陆账号：" prop="txtLoginName" style="width:295px;" >
                        <el-input v-model="formData1.txtLoginName"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="所属部门：" prop="txtOrgID"  style="width:295px;" >
                        <el-select v-model="formData1.txtOrgID">
                          <el-option v-for="(t,i) in dutyList" :key="i" :label="t" :value="i"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="员工工号："  style="width:295px;"  >
                        <el-input v-model="formData1.txtUserNo"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="入职时间："  style="width:295px;" >
                        <el-date-picker  v-model="formData1.txtEntryTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                      </el-form-item>
                      <el-form-item label="职务："  style="width:295px;"  >
                        <el-input v-model="formData1.txtOfficeDuty"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="职称："  style="width:295px;" >
                        <el-input v-model="formData1.txtProfessionalPost"></el-input>
                      </el-form-item>
                      <el-form-item label="民族："  style="width:295px;" >
                        <el-input v-model="formData1.txtNationality"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="性别："  style="width:295px;" >
                        <el-select v-model="formData1.txtSex">
                          <el-option v-for="(t,i) in sex" :key="i" :label="t" :value="i"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="政治面貌："  style="width:295px;" >
                        <el-input v-model="formData1.txtPolity"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="身份证号：" prop="txtIDCard"  style="width:295px;" >
                        <el-input v-model="formData1.txtIDCard"></el-input>
                      </el-form-item>
                      <el-form-item label="文化程度："  style="width:295px;" >
                        <el-input v-model="formData1.txtEducation"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="密码问题："   style="width:295px;" >
                        <el-select v-model="formData1.txtQuestion">
                          <el-option v-for="(t,i) in questionList" :key="i" :label="t" :value="i"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="联系电话"   style="width:295px;" >
                        <el-input v-model="formData1.txtTel"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="答案："   style="width:295px;" >
                        <el-input v-model="formData1.txtAnswer"></el-input>
                      </el-form-item>
                      <el-form-item label="家庭电话："   style="width:295px;" >
                        <el-input v-model="formData1.txtHomeTel"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="EMAIL："  style="width:480px;" >
                        <el-input v-model="formData1.txtEmail" style="width:360px;" maxlength="200"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="现住址："  style="width:480px;" >
                        <el-input v-model="formData1.txtHomeAddress" style="width:360px;"></el-input>
                      </el-form-item>
                  </div>
                  <div class="inline-btn">
                      <el-form-item label="备注："  style="width:480px;" >
                        <el-input v-model="formData1.txtMemo" style="width:360px;"></el-input>
                      </el-form-item>
                  </div>
                </div>
                <div class="right" style="">
                  <div class="inline-btn">
                    <label style="width:90px;">员工照片：</label>
                    <input type="file" style="width:150px;" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg" />
                    <el-button size="mini" style="margin-left: 10px;" @click="uploadImg">上传</el-button>
                  </div>
                  <div class="inline-btn" style="margin-top: 10px;margin-left:60px;">
                    <img :src="formData1.imgUpload" style="width: 100px;height: 120px;"/>
                    <label style="width:180px;">建议照片大小为小2寸最佳(长×宽为45mm×35mm)</label>
                  </div>
                  <div class="inline-btn" style="margin-top: 15px;">
                    <label style="width:90px;">员工状态：</label>
                    <el-checkbox v-model="formData1.txtStatus" label="启用" :checked="true"></el-checkbox>
                  </div>
                   <div class="inline-btn" style="margin-top: 15px;">
                    <label style="width:90px;">最后退出：</label>
                    <el-input v-model="formData1.txtLastOutTime" placeholder="尚未登录系统" :disabled="true"></el-input>
                  </div>
                   <div class="inline-btn" style="margin-top: 15px;">
                    <label style="width:90px;">最后登录：</label>
                    <el-input v-model="formData1.txtLastInTime" placeholder="尚未登录系统" :disabled="true"></el-input>
                  </div>
                   <div class="inline-btn" style="margin-top: 15px;">
                    <label style="width:90px;">是否在线：</label>
                    <el-checkbox v-model="formData1.txtIsOnline" :disabled="true" label="是"></el-checkbox>
                  </div>
                </div>
                <div class="footer">
                    <el-button @click="confirmBtn">确 定</el-button>
                    <el-button @click="applyBtn1">应 用</el-button>
                    <el-button @click="cancelBtn">打 印</el-button>
                    <el-button @click="cancelBtn">取 消</el-button>
                </div>
              </div>
               </el-form>
            </el-tab-pane>
            <!--第二个tab页-->
            <el-tab-pane label="家庭主要成员" name="second">
              <el-container>
                <div class="" style="margin:2%;">
                  <div class="public-title" style="text-indent: 10px;">
                    <i class="el-icon-circle-plus-outline"></i>
                    <el-button type="text" @click="addBtn1">新增</el-button>
                  </div>
                  <el-table :data="tableData1" border width="100%">
                    <el-table-column prop="FullName"  label="姓名" ></el-table-column>
                    <el-table-column prop="Kinship"  label="关系" ></el-table-column>
                    <el-table-column prop="WorkCompany"  label="工作单位或住址" ></el-table-column>
                    <el-table-column prop="PhoneNumber"  label="联系电话" ></el-table-column>
                    <el-table-column label="操作" fixed="right">
                      <template slot-scope="scope">
                        <el-button type="text" @click="deleteData(scope.$index)" size="mini">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-footer style="text-align: right;">
                  <el-button @click="confirmBtn">确 定</el-button>
                  <el-button @click="applyBtn">应 用</el-button>
                  <el-button @click="cancelBtn">打 印</el-button>
                  <el-button @click="cancelBtn">取 消</el-button>
                </el-footer>
              </el-container>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!--el-dialog-->
        <el-dialog title="家庭主要成员" :visible.sync="dialogVisible">
          <span>
            <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
              <el-form-item label="姓名：" prop="FullName" >
                <el-input v-model="formData.FullName"></el-input>
              </el-form-item>
              <el-form-item label="关系：" prop="Kinship">
                <el-input v-model="formData.Kinship"></el-input>
              </el-form-item>
              <el-form-item label="工作单位或住址:" >
                <el-input v-model="formData.WorkCompany"></el-input>
                <!-- <el-date-picker  clearable v-model="formData.WorkCompany" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker> -->
              </el-form-item>
              <el-form-item label="联系电话：">
                <el-input v-model="formData.PhoneNumber"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancelBtn1('formData')">取 消</el-button>
            <el-button type="primary" @click="submitData('formData')">提 交</el-button>
          </span>
        </el-dialog>
        <!--el-dialog-->
    </div>
  </div>
</template>
<script>
import {staff} from '@/ajax';
import config from './Manage.js';
import utils from '@/utils';
export default {
    data(){
        return {
          searchdata:{
            txtUserName:'',txtOrgName:'',txtUserNo:'',txtIDCard:'',txtOfficeDuty:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          isEdit:true,
          activeName:'first',
          tableData1:[],
          dialogVisible:false,
          formData:{FullName:'',Kinship:'',WorkCompany:'',PhoneNumber:''},
          formRule:{
            FullName:{required:true,message:'请填写姓名',trigger:'blur'}
          },
          appendArr:[],
          index:0,
          selection:[],
          formData1:{txtUserName:'',txtLoginName:'',imgUpload:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    txtIsOnline:'',txtLastInTime:'',txtLastOutTime:'',txtMemo:'',txtHomeAddress:'',
                    txtEmail:'',txtHomeTel:'',txtAnswer:'',txtOrgID:'',txtEntryTime:'',txtSex:'0',
                    txtProfessionalPost:'',txtIDCard:'',txtQuestion:'',txtUserNo:'',txtOfficeDuty:'',
                    txtNationality:'',txtPolity:'',txtEducation:'',txtTel:''
                    },
          formRule1:{
            txtUserName:{required:true,message:'请填写用户名称',trigger:'blur'},
            txtLoginName:{required:true,message:'请填写登陆账号',trigger:'blur'},
            txtOrgID:{required:true,message:'请选择所属部门',trigger:'blur'},
            txtIDCard:{ required: true, validator: utils.idcardJuje, trigger: 'blur' },
          },
          config:config,
          dutyList:config.dutyList,
          questionList:config.questionList,
          sex:config.sex
        }
    },
    mounted(){
      if(this.isEdit){
        this.getStaffList();
      }
    },
    inject:['reload'],
    methods:{
      //getStaffList,deleteStaffMsg,getFamilyList,applyStaffMsg,addStaffMsg
      searchBtn(){
        this.getStaffList();
      },
      //
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['staff_id'])
          }
        }
      },
      getStaffList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        staff.getStaffList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取员工列表失败');
          })
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.searchBtn();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.searchBtn();
      },
      addBtn(){
        this.isEdit = false;
      },
      cancelBtn(){
        this.isEdit = true;
        this.getStaffList();
      },
      tabClick(tab,event){
        console.log(tab+'aaa'+event)
      },
      addBtn1(){
        this.formData = {FullName:'',Kinship:'',WorkCompany:'',PhoneNumber:''}
        this.dialogVisible = true
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
           staff.deleteStaffMsg(this.selection).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，删除失败');
            })
        }
      },
      //确定按钮 最后提交tableData1(和应用之间的关系？？)
      confirmBtn(){
        if(true){

        }else{
          staff.addStaffMsg().then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，操作失败');
            })
        }
      },
      applyBtn(){
        if(this.tableData1.length <= 0){
          this.$message('请添加家庭成员信息')
        }else{
          staff.applyStaffMsg(this.tableData1).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，添加家庭成员失败');
            })
        }
      },
      //新增员工的应用
      applyBtn1(){

      },
      //删除家庭成员信息（移除tableData1中的数据即可）
      deleteData(row){
        this.tableData1.splice(row,1)
        this.index--;
      },
      submitData(form){
        this.$refs[form].validate((valid) => {
          if(valid){
            this.$set(this.tableData1,this.index,this.formData)
            this.dialogVisible = false;
            this.index++;
          }else{
            return false
          }
        })
      },
      cancelBtn1(form){
        this.$refs[form].clearValidate()
        this.dialogVisible = false
      },
      uploadImg() {
        let formData = new FormData();
        let inputDOM = this.$refs.inputer;
        let imgMsg = inputDOM.files[0];
        formData.append('file', imgMsg);
        staff.uploadStaffImg({ file: formData }).then((res)=> {
            if (res.data.code == '00000') {
              this.formData1.imgUpload = res.data.data;
            } else {
              this.$message(res.data.data.message);
            }
          }).catch(() => {
            this.$message('上传失败');
          });
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input{width: 180px;}
    .left{display: inline-block;;width:64%;float: left;}
    .right{display: inline-block;;width:35%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
}
</style>
